<template>
  <div class="left flex column">
    <div class="top box flex column">
      <div class="box-header">资源分配量</div>
      <div class="box-content flex-1 flex column">
        <!-- <v-chart :options="po lar" /> -->

        <div class="box-bar flex center flex-1">
          <div class="bar-txt">CPU</div>
          <div class="bar flex-1">
            <div
              class="percent-color"
              :style="{ width: '70%', background: '#00ffff' }"
            >
              <div class="point"></div>
            </div>
          </div>
          <div class="bar-txt">70%</div>
        </div>
        <div class="box-bar flex center flex-1">
          <div class="bar-txt">内存</div>
          <div class="bar flex-1">
            <div
              class="percent-color"
              :style="{ width: '60%', background: '#E8871F' }"
            >
              <div class="point"></div>
            </div>
          </div>
          <div class="bar-txt">60%</div>
        </div>
        <div class="box-bar flex center flex-1">
          <div class="bar-txt">内存</div>
          <div class="bar flex-1">
            <div
              class="percent-color"
              :style="{ width: '60%', background: '#E8871F' }"
            >
              <div class="point"></div>
            </div>
          </div>
          <div class="bar-txt">60%</div>
        </div>
      </div>
    </div>
    <div class="middle box">
      <div class="box-header"> 资源统计 </div>
      <div class="box-content  ">
        <ve-pie
          v-if="show"
          :data="chartData"
          :height="mapHeight"
          :settings="chartSettings"
          :extend="Extend"
          :legend-visible="false"
        ></ve-pie>
      </div>
    </div>
    <div class="bottom flex-1 box" >
      <div class="box-header"> 服务报警 </div>
      <div class="box-content ">

        <ve-bar
          :height="'100px'"
          :extend="sex.extend"
          :settings="sex.chartSettings"
          :judge-height="true"
          :data="sex.chartData"
        ></ve-bar>
      </div>
    </div>
  </div>
</template>
<script>
import VePie from "v-charts/lib/pie.common";
import VeBar from "v-charts/lib/bar.common";

export default {
  components: {
    VePie,
    VeBar,
  },
  mounted() {
    this.mapHeight =
      document.getElementsByClassName("middle")[0].clientHeight - 60 + "px";
    console.log('left',this.mapHeight);
    this.show = true
  },
  data() {
    this.chartSettings = {
      roseType: "radius",
    };
    return {
      show:false,
      mapHeight:'0px',
      Extend: {
        series: {
          label: {
            show: true,
            formatter: function (params) {
              console.log(params);
              return params.name + " : " + params.value;
            },
          },
        },
      },
      chartData: {
        columns: ["资源", "访问用户"],
        rows: [
          { 资源: "cpu", 访问用户: 1393 },
          { 资源: "MySql", 访问用户: 3530 },
          { 资源: "Redis", 访问用户: 2923 },
          { 资源: "VDC", 访问用户: 1723 },
          { 资源: "流量", 访问用户: 3792 },
        ],
      },

      sex: {
        extend: {
          color: ["#FCAE00", "#2D7EFD"], //胶囊图的颜色
          legend: {
            itemWidth: 8,
            itemHeight: 8,
            show: true,
            textStyle: {
              color: "#FFFFFF",
            },
            fontSize: 8,
            x: "center", //可设定图例在左、右、居中
            y: "bottom", //可设定图例在上、下、居中
            padding: [0, 0, 15, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          },
          "series.0.itemStyle": {
            normal: {
              barBorderRadius: [10, 0, 0, 10], //两头扁圆形状
            },
          },
          "series.1.itemStyle": {
            normal: {
              barBorderRadius: [0, 10, 10, 0], //两头扁圆形状
            },
          },
          series: {
            barGap: 0,
            symbol: "none",
            smooth: false,
            barWidth: 16,
          },

          grid: {
            top: "5%",
            bootom: "5%",
            left: "10%",
            right: "10%",
            height: "80%",
          },
          xAxis: {
            show: false, //隐藏掉横坐标
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
            },
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            axisLine: {
              show: false, //隐藏掉纵坐标
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "red",
              fontSize: 10,
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#FFFFFF",
                opacity: 0.2,
              },
            },
          },
        },
        chartSettings: {
          stack: {
            得得得: ["成功", "失败"],
          },
        },
        chartData: {
          columns: ["类型", "成功", "失败"],
          rows: [
            {
              类型: "服务请求",
              成功: 393,
              失败: 93,
            },
          ],
        },
      },
    };
  },
};
</script>